<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline queryFrom">
          <el-form-item label="对象名称">
            <el-input v-model="subjectName" clearable placeholder="" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24"> 
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />新 增</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <testhttb @deleteSelectData="deleteSelectData" ref="httbRef" :table-col="tabUserList" :table-data="tableUserData" @refresh="getUserList" />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogTableVisible">
      <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm autoClass">
        <el-form-item label="对象名称" prop="subjectName">
          <el-input v-model="ruleForm['subjectName']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="特效" prop="effectId">
          <el-select v-model="ruleForm['effectId']" clearable placeholder="请选择">
            <el-option
              v-for="(item,i) in effectNameList"
              :key="i"
              :label="item.effectName"
              :value="item.effectId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="labelId">
          <el-select v-model="ruleForm['labelId']" clearable placeholder="请选择">
            <el-option
              v-for="(item,i) in labelOptions"
              :key="i"
              :label="item.labelName"
              :value="item.labelId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模型" prop="modelId">
          <el-select v-model="ruleForm['modelId']" clearable placeholder="请选择">
            <el-option
              v-for="(item,i) in moduleOptions"
              :key="i"
              :label="item.modelName"
              :value="item.modelId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="模型轨迹" prop="modelLocus">
          <el-input v-model="ruleForm['modelLocus']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="模型参数" prop="modelParameter">
          <el-input v-model="ruleForm['modelParameter']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm['remark']" clearable placeholder="" />
        </el-form-item>

        <el-form-item label="主题ID" prop="topicId">
          <el-select v-model="ruleForm['topicId']" clearable placeholder="请选择">
            <el-option
              v-for="(item,i) in options2"
              :key="i"
              :label="item.trialName"
              :value="item.trialId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="WS地址" prop="wsUrl">
          <el-input v-model="ruleForm['wsUrl']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="ruleForm['state']">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">{{ btnStr }}</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getsubjectpageList, addsubjectinsert, subjectupdate, effectPageList, trialLabelPageList, getmodelpageList,subjectremoves
} from '@/api/home_/experiment'
import experiment from '@/mixins/experiment'
export default {
  components: {
  },
  mixins: [experiment],
  data() {
    return {
      moduleOptions: [],
      labelOptions: [],
      effectNameList: [],
      title: '新增',
      rules: {},
      trialName: '',
      subjectName: '',
      ruleForm: {
        'effectId': '', // 特效
        'labelId': '', // 标签
        'modelId': '', // 模型
        'modelLocus': '',
        'modelParameter': '',
        'remark': '',
        'state': '',
        'subjectId': '',
        'subjectName': '',
        'topicId': '', // 于坤
        'wsUrl': ''// 于坤
      },
      dialogTableVisible: false,
      userId: '',
      tableUserData: [],
      tabUserList: [
        {
          key: 'subjectName',
          title: '对象名称'
        },
        {
          key: 'modelType',
          title: '模型类型'
        },
        {
          key: 'modelName',
          title: '模型名称'
        },
        {
          key: 'labelName',
          title: '模型标签'
        },
        {
          key: 'modelLocus',
          title: '模型轨迹'
        },
        {
          key: 'modelParameter',
          title: '模型参数'
        },
        {
          key: 'topicQueue',
          title: '主题名称'
        },
        {
          key: 'wsUrl',
          title: 'ws地址'
        }
      ],
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList()
      this.getEffectList()
    })
  },
  methods: {
    deleteSelectData(v) {
      subjectremoves({ ids: [v.subjectId] }).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    getEffectList() {
      effectPageList({
        data: {
          'effectName': '',
          'effectType': ''
        },
        'current': 1,
        'size': 1000
      }).then(res => {
        this.effectNameList = res.data.records
      })

      trialLabelPageList({
        'current': 1,
        data: {
          'labelName': '',
          'labelType': ''
        },
        'size': 1000
      }).then(res => {
        this.labelOptions = res.data.records
      })

      getmodelpageList({
        'current': 1,
        data: {
          'subjectName': ''
        },
        'size': 1000
      }).then(res => {
        this.moduleOptions = res.data.records
      })
    },
    commitFromData() {
      // 这个模块数据没有id，所有有id就是新增
      if (this.title != '新增') {
        subjectupdate(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.dialogTableVisible = false
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      } else {
        addsubjectinsert(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.dialogTableVisible = false
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      }
    },
    handleSizeChange(v) {
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
      getsubjectpageList(
        {
          'data': {
            'subjectName': this.subjectName
          },
          'current': 1,
          'size': 100
        }
      ).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  .el-select{
    width:100%;
  }
    .timing{
      background:#fff;
      padding:20px;
    }
    .autoClass{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    .el-form-item{
        width:50%;
    }
}
  </style>
